<template>
     <div class="hotsing">
       <img :src="playlist.coverImgUrl | completeImageUrl" alt="">
       <ul>
           <li>
             <span class="hotsinge">
                <div class="fle">
                    <div class="box">
                    <svg
                    t="1646232281646"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4730"
                    width="35"
                    height="35"
                    >
                    <path
                        d="M0 0h1024v1024H0z"
                        fill="#000000"
                        opacity=".01"
                        p-id="4731"
                    ></path>
                    <path
                        d="M520 128C736.496 128 912 303.504 912 520S736.496 912 520 912C303.6 911.76 128.24 736.4 128 520 128 303.504 303.504 128 520 128z m0 60.288c-183.12 0.192-331.52 148.592-331.712 331.712 0 183.2 148.496 331.712 331.712 331.712 183.2 0 331.712-148.512 331.712-331.712S703.2 188.288 520 188.288z m-84.528 176.576l233.776 155.264-233.76 155.024V364.864z"
                        fill="#A8ADBB"
                        p-id="4732"
                    ></path>
                    </svg>
                     </div>
                     <div class="gequ">
                        <p>{{item.name}}</p>
                        <p class="hotsinger">{{item.ar[0].name}}-{{item.al.name}}</p>
                    </div>
                 </div>
                 <div><hr /></div>
             </span>
           </li>
       </ul>
   </div>
</template>

<script>
export default {
    props: {
        item: Object,
    }
}
</script>

<style lang="less">
   .hotsing {
       img {
          width: 100%;
          height: 100px;
       }

       ul {
           margin: 0;
           padding: 0;
           li {
           list-style: none;
           position: relative;
           height: 40px;
           p {
               margin: 0;
               padding: 0;
           }
       }

       .gequ {
           padding: 6px 0;
           margin-left: 10px;
       }
       }
       hr {
           padding: 0;
           margin: 0;
           width: 92%;
           margin-left: 4%;
       }
       .hotsinger {
           font-size: 12px;
           color: #888
       }
       .box {
           position: absolute;
           left: 88%;
           margin-top: 8px;
       }
   }
</style>